<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .scale-effect {
    display: inline-block; /* 保证缩放效果应用到整个容器 */
    transition: transform 0.3s ease;
    /* 添加其他样式来控制图片的宽高 */
    width: 300px;
    height: 200px;
    overflow: hidden;
  }

  .scale-effect:hover {
    transform: scale(1.1); /* 整体放大 */
  }

  .scale-effect img {
    width: 100%;
    height: 100%;
    display: block; /* 防止图片底部出现空白 */
  }
</style>
</head>
<body>
  <div class="scale-effect">
    <img src="./imgs/01 首页.jpg" alt="Image">
  </div>
</body>
</html>
